<template>
    <div class="life-blog">
        <div class="main">
            <div class="floating-elements">
                <!-- 复用浮动元素 -->
                <div class="floating-square"></div>
                <div class="floating-square"></div>
                <div class="floating-square"></div>
                <div class="floating-circle"></div>
                <div class="floating-circle"></div>
                <div class="floating-circle"></div>
                <div class="floating-triangle"></div>
                <div class="floating-triangle"></div>
                <div class="floating-triangle"></div>
                <div class="floating-cross"></div>
                <div class="floating-cross"></div>
                <div class="floating-cross"></div>
            </div>
            <div class="light-beams">
                <div class="beam"></div>
                <div class="beam"></div>
                <div class="beam"></div>
            </div>
            <div class="container">
                <div class="nav-header">
                    <div class="left-section">
                        <router-link to="/home" class="back-link">
                            <svg class="back-icon" viewBox="0 0 24 24" width="24" height="24">
                                <path fill="currentColor"
                                    d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z" />
                            </svg>
                            <span>首页</span>
                        </router-link>
                        <h1>生活随笔</h1>
                    </div>

                    <!-- 搜索框 -->
                    <div class="search-box cards">
                        <svg class="search-icon" viewBox="0 0 24 24" width="20" height="20">
                            <path fill="currentColor"
                                d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z" />
                        </svg>
                        <input type="text" v-model="searchQuery" placeholder="搜索文章..." @input="handleSearch">
                        <button v-if="searchQuery" class="clear-btn" @click="clearSearch" title="清除搜索">
                            <svg viewBox="0 0 24 24" width="20" height="20">
                                <path fill="currentColor"
                                    d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" />
                            </svg>
                        </button>
                    </div>
                </div>

                <div class="categories cards">
                    <button class="category-btn" :class="{ active: selectedCategory === '' }"
                        @click="selectedCategory = ''">
                        全部
                    </button>
                    <button v-for="category in categories" :key="category" class="category-btn"
                        :class="{ active: selectedCategory === category }" @click="selectedCategory = category">
                        {{ category }}
                    </button>
                </div>

                <div class="blog-grid">
                    <article v-for="post in posts" :key="post.id" class="blog-card cards" @click="goToDetail(post.id)">
                        <div class="card-cover">
                            <img :src="post.cover || `https://picsum.photos/400/300?random=${post.id}`"
                                :alt="post.title">
                        </div>
                        <div class="card-content">
                            <h2 class="whitespace-nowrap overflow-hidden text-overflow-ellipsis">{{ post.title }}</h2>
                            <div class="meta">
                                <span class="date">{{ new Date(post.createTime).toLocaleDateString() }}</span>
                                <span class="author">
                                    <svg class="author-icon" viewBox="0 0 24 24" width="16" height="16">
                                        <path fill="currentColor"
                                            d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" />
                                    </svg>
                                    {{ post.author }}
                                </span>
                                <span class="category">{{ post.category }}</span>
                            </div>
                            <p class="summary min-h-[1.5rem] overflow-hidden text-ellipsis line-clamp-2">{{ post.summary
                                }}</p>
                            <div class="tags">
                                <span v-for="tag in (typeof post.tags === 'string' ? JSON.parse(post.tags) : post.tags)"
                                    :key="tag" class="tag">{{ tag }}</span>
                            </div>
                        </div>
                    </article>
                </div>

                <div class="pagination cards" v-if="totalPages > 1">
                    <button class="page-btn" :disabled="currentPage === 1" @click="currentPage--">
                        上一页
                    </button>
                    <div class="page-numbers">
                        <button v-for="page in displayedPages" :key="page" class="page-btn"
                            :class="{ active: currentPage === page }" @click="currentPage = page">
                            {{ page }}
                        </button>
                    </div>
                    <button class="page-btn" :disabled="currentPage === totalPages" @click="currentPage++">
                        下一页
                    </button>
                </div>
            </div>
        </div>
        <div v-if="loading" class="loading-overlay">
            <div class="loading-spinner"></div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, computed, watch, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { articleApi } from '@/api/article'
import type { Article } from '@/types/article'

const router = useRouter()
const selectedCategory = ref('')
const currentPage = ref(1)
const postsPerPage = 8
const searchQuery = ref('')
const loading = ref(false)
const total = ref(0)

// 文章列表和分类
const posts = ref<Article[]>([])
const categories = ref<string[]>([])

// 获取文章列表
const fetchPosts = async () => {
    try {
        loading.value = true
        const { data } = await articleApi.getLifeArticles({
            page: currentPage.value,
            pageSize: postsPerPage,
            category: selectedCategory.value,
            search: searchQuery.value
        })
        posts.value = data.list
        total.value = data.total
    } catch (error) {
        console.error('获取文章列表失败:', error)
    } finally {
        loading.value = false
    }
}

// 获取分类列表
const fetchCategories = async () => {
    try {
        const { data } = await articleApi.getLifeCategories()
        categories.value = data
    } catch (error) {
        console.error('获取分类列表失败:', error)
    }
}

// 监听分类变化
watch(selectedCategory, () => {
    currentPage.value = 1
    fetchPosts()
})

// 监听页码变化
watch(currentPage, () => {
    fetchPosts()
})

// 处理搜索
const handleSearch = () => {
    currentPage.value = 1
    fetchPosts()
}

const clearSearch = () => {
    searchQuery.value = ''
    currentPage.value = 1
    fetchPosts()
}

// 计算总页数
const totalPages = computed(() => {
    return Math.ceil(total.value / postsPerPage)
})

// 计算显示的页码
const displayedPages = computed(() => {
    const pages = []
    const maxDisplayed = 5
    let start = Math.max(1, currentPage.value - 2)
    let end = Math.min(totalPages.value, start + maxDisplayed - 1)

    if (end - start + 1 < maxDisplayed) {
        start = Math.max(1, end - maxDisplayed + 1)
    }

    for (let i = start; i <= end; i++) {
        pages.push(i)
    }
    return pages
})

const goToDetail = (id: number) => {
    router.push(`/life/${id}`)
}

// 组件挂载时获取数据
onMounted(() => {
    fetchCategories()
    fetchPosts()
})
</script>

<style scoped>
/* 复用技术博客的基础样式 */
.life-blog {
    min-height: 100vh;
    position: relative;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #1a1a2e 100%);
    overflow-y: auto;
    animation: gradientMove 15s ease infinite;
}

.main {
    position: relative;
    color: #fff;
    min-height: 100vh;
    padding-bottom: 2rem;
    background:
        radial-gradient(circle at 10% 20%, rgba(91, 37, 195, 0.15) 0%, transparent 40%),
        radial-gradient(circle at 90% 80%, rgba(41, 125, 182, 0.15) 0%, transparent 40%),
        radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.05) 0%, transparent 60%);
    overflow: hidden;
}

.container {
    position: relative;
    z-index: 3;
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem 1rem;
}

/* 导航和搜索栏样式 */
.nav-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 2rem;
    padding: 1rem;
}

.left-section {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.back-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #fff;
    text-decoration: none;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    background: linear-gradient(145deg,
            rgba(255, 255, 255, 0.08) 0%,
            rgba(255, 255, 255, 0.05) 100%);
    transition: all 0.3s ease;
}

.back-link:hover {
    transform: translateX(-5px);
    background: linear-gradient(145deg,
            rgba(255, 255, 255, 0.12) 0%,
            rgba(255, 255, 255, 0.08) 100%);
}

.nav-header h1 {
    font-size: 2rem;
    margin: 0;
}

/* 分类按钮样式 */
.categories {
    display: flex;
    gap: 1rem;
    padding: 1rem;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}

.category-btn {
    padding: 0.5rem 1rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 1.5rem;
    background: linear-gradient(to right, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
    color: #fff;
    cursor: pointer;
    transition: all 0.3s ease;
}

.category-btn:hover {
    background: linear-gradient(to right, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.1));
    border-color: rgba(255, 255, 255, 0.2);
}

.category-btn.active {
    background: linear-gradient(to right, rgba(91, 37, 195, 0.3), rgba(41, 125, 182, 0.3));
    border-color: rgba(255, 255, 255, 0.3);
    font-weight: bold;
}

/* 博客卡片网格布局 */
.blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 2rem;
    animation: fade .5s;
}

/* 卡片样式 */
.cards {
    background: linear-gradient(145deg,
            rgba(255, 255, 255, 0.08) 0%,
            rgba(255, 255, 255, 0.05) 100%);
    border-radius: 12px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow:
        0 4px 6px rgba(0, 0, 0, 0.1),
        0 1px 3px rgba(0, 0, 0, 0.08),
        inset 0 1px 1px rgba(255, 255, 255, 0.05);
    transition: all 0.3s ease;
}

.cards:hover {
    transform: translateY(-2px);
    background: linear-gradient(145deg,
            rgba(255, 255, 255, 0.12) 0%,
            rgba(255, 255, 255, 0.08) 100%);
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow:
        0 8px 12px rgba(0, 0, 0, 0.15),
        0 3px 6px rgba(0, 0, 0, 0.1),
        inset 0 1px 1px rgba(255, 255, 255, 0.1);
}

/* 博客卡片特有样式 */
.blog-card {
    overflow: hidden;
    cursor: pointer;
    animation: fadeIn 0.6s ease-out;
    animation-fill-mode: both;
}

.card-cover {
    width: 100%;
    height: 200px;
    overflow: hidden;
    position: relative;
}

.card-cover::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to bottom,
            transparent 0%,
            rgba(26, 26, 46, 0.5) 100%);
}

.card-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.blog-card:hover .card-cover img {
    transform: scale(1.1);
}

.card-content {
    padding: 1.5rem;
}

.card-content h2 {
    font-size: 1.3rem;
    margin-bottom: 1rem;
    line-height: 1.4;
}

/* 元信息样式 */
.meta {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 1rem;
    font-size: 0.9rem;
    opacity: 0.8;
    align-items: center;
}

.author {
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.summary {
    margin-bottom: 1rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.8);
}

/* 标签样式 */
.tags {
    display: flex;
    gap: 0.8rem;
    flex-wrap: wrap;
}

.tag {
    background: linear-gradient(135deg,
            rgba(91, 37, 195, 0.15) 0%,
            rgba(41, 125, 182, 0.15) 100%);
    padding: 0.25rem 0.75rem;
    border-radius: 1rem;
    font-size: 0.9rem;
    border: 1px solid rgba(255, 255, 255, 0.15);
    transition: all 0.3s ease;
}

/* 分页样式 */
.pagination {
    margin-top: 2rem;
    padding: 1rem;
    display: flex;
    justify-content: center;
    gap: 1rem;
    align-items: center;
}

.page-numbers {
    display: flex;
    gap: 0.5rem;
}

.page-btn {
    padding: 0.5rem 1rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0.5rem;
    background: linear-gradient(to right, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
    color: #fff;
    cursor: pointer;
    transition: all 0.3s ease;
}

.page-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.page-btn:hover:not(:disabled) {
    background: linear-gradient(to right, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.1));
    border-color: rgba(255, 255, 255, 0.2);
}

.page-btn.active {
    background: linear-gradient(to right, rgba(91, 37, 195, 0.3), rgba(41, 125, 182, 0.3));
    border-color: rgba(255, 255, 255, 0.3);
    font-weight: bold;
}

/* 搜索框样式 */
.search-box {
    width: 300px;
    padding: 0.5rem 0.8rem;
    display: flex;
    align-items: center;
    gap: 0.8rem;
    transition: all 0.3s ease;
}

.search-box:focus-within {
    width: 400px;
}

.search-box input {
    flex: 1;
    background: transparent;
    border: none;
    color: #fff;
    font-size: 1rem;
    outline: none;
    padding: 0.5rem 0;
}

.search-box input::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

/* 动画 */
@keyframes fade {
    0% {
        opacity: 0;
        transform: translateY(10px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 移动端适配 */
@media (max-width: 768px) {
    .nav-header {
        flex-direction: column;
        align-items: stretch;
        padding: 1.2rem 0.8rem;
    }

    .nav-header h1 {
        font-size: 2rem;
    }

    .back-link {
        padding: 0.8rem 1.5rem;
        font-size: 1.2rem;
    }

    .back-icon {
        width: 2rem;
        height: 2rem;
    }

    .search-box {
        width: 100%;
        padding: 0.8rem 1rem;
    }

    .search-box input {
        font-size: 1.1rem;
    }

    .category-btn {
        padding: 0.8rem 1.5rem;
        font-size: 1.1rem;
    }

    .blog-card {
        padding: 0;
    }

    .card-content {
        padding: 1.5rem;
    }

    .card-content h2 {
        font-size: 1.5rem;
        margin-bottom: 1.2rem;
    }

    .meta {
        font-size: 1.1rem;
        gap: 1.2rem;
    }

    .summary {
        font-size: 1.1rem;
        line-height: 1.7;
        margin-bottom: 1.2rem;
    }

    .tag {
        padding: 0.5rem 1.2rem;
        font-size: 1.05rem;
    }

    .pagination {
        padding: 1.5rem 0.8rem;
    }

    .page-btn {
        padding: 1rem 1.8rem;
        font-size: 1.2rem;
    }
}

/* 添加加载状态样式 */
.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.loading-spinner {
    width: 50px;
    height: 50px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: #fff;
    animation: spin 1s ease-in-out infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}
</style>